.view {
  width: 100%;
  h1 {
    height: 100vh;
    line-height: 100vh;
    text-align: center;
    font-size: 100px;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // overflow: hidden;
    div {
      width: 100%;
      height: 200px;
      margin-bottom: 5%;
    //   border: 2px solid black;
      border-radius: 5px;
      background-color: skyblue;
      animation: animate linear;
      // 动画开始的时间
      animation-timeline: view();
      // 动画开始阈值
      animation-range: entry 0% cover 45%;
    }
    div:hover{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .q {
      width: 30%;
    }
    .w {
      width: 66%;
    }
    .e,
    .r {
      width: 13%;
    //   animation: animate1 linear;
    //   // 动画开始的时间
    //   animation-timeline: view();
    //   // 动画开始阈值
    //   animation-range: entry 0% cover 45%;
    }
    .t {
      width: 66%;
    }
  }
}
@keyframes animate {
  from {
    opacity: 0;
    scale: 0.2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes animate1 {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
